<template>
  <FormItem
    :label="label"
    :prop="prop"
    :label-width="labelWidth"
    :rules="rules"
  >
    <Select
      :placeholder="placeholder ? placeholder : '请选择'"
      :disabled="disabled"
      v-model="currentValue"
      :size="size"
      style="min-width: 170px"
      :clearable="clearable"
      :filterable="filterable"
      :multiple="multiple"
      :default-label="defaultLabel"
      :remote-method="getListFromRemote"
      :loading="loading && updateListSpinShow"
    >
      <Option
        v-for="(item,index) in list"
        :value="item.value"
        :label="item.label"
        :key="index"
      >{{item.label}}</Option>
    </Select>
    <slot></slot>
  </FormItem>
</template>

<script>
import commonItem from './commonItem'
import { FormItem, Select, Option } from 'view-design'
export default {
  name: 'SelectItem',
  components: { FormItem, Select, Option },
  mixins: [commonItem],
  data () {
    return {
      updateListSpinShow: false
    }
  },
  computed: {
    filterable () {
      // filterable 是否支持搜索
      // allow-create 是否允许用户创建新条目，需开启 filterable
      // setQuery 设置搜索词，为空时清空，仅在 filterable="true" 时有效
      let { filterable = false } = this.info
      return filterable
    },
    multiple () {
      // multiple 是否支持多选
      let { multiple = false } = this.info
      return multiple
    },
    defaultLabel () {
      // default-label 远程搜索时，显示默认 label，详见示例
      let { defaultLabel = '' } = this.info
      return defaultLabel
    },
    remoteMethod () {
      // remote-method 远程搜索的方法
      let { remoteMethod } = this.info
      let getList = () => this.list
      if (this.filterable) {
        const _li = this.info.list
        if (typeof remoteMethod === 'function') {
          getList = remoteMethod
        } else if (typeof _li === 'function') {
          getList = _li
        }
      }
      return getList
    }
  },
  methods: {
    async getListFromRemote (name) {
      this.updateListSpinShow = true
      this.list = await this.remoteMethod(name)
      this.updateListSpinShow = false
    }
  }
}
</script>
